<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/hotellie.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/bootstrap.css"/>
		<link rel="stylesheet"
				href="#{request.contextPath}/resources/css/font-awesome.css"/>
		<f:metadata>
		    <f:viewParam id="query" name="dealId" value="#{dealView.dealId}" />
		    <f:event type="preRenderView" listener="#{dealView.preRenderedInit()}" />
		</f:metadata>		
    </h:head>
   
    <h:body>
        
        <pm:page id="dealView">
        
            <pm:header swatch="b" styleClass="hmsHeader">
	            <div class="row headerRow">
          			<div class="col-xs-2">
          				<a href="#panel-1" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true"></a>
						<div data-role="panel" id="panel-1" data-display="overlay">
							<ul data-role="listview" id="listview-1">
							    <li><a href="${pageContext.request.contextPath}/hms/index.xhtml">Home</a></li>
								<li><a href="item2.html">Deals</a></li>
								<li><a href="item2.html">Recently viewed Hotels</a></li>
								<li><a href="item2.html">Recently viewed Deals</a></li>
								<li><a href="item3.html">Recent searches</a></li>
				                <li><a href="${pageContext.request.contextPath}/hms/about.xhtml">About</a></li>
				                <c:if test="${signInUserView.userLoggedIn}">
									<li><a href="#{request.contextPath}/user/userDetails.xhtml">Profile</a></li>
									<li><a href="#{request.contextPath}/user/changePassword.xhtml">Change Password</a></li>
				                    <li><h:commandLink action="#{signInUserView.logout()}" value="Longout" /></li>
							    </c:if>	
							</ul>
						</div>
          			</div>
					<div class="col-xs-3">
					    <p:commandLink action="/index.xhtml?faces-redirect=true">
						   <h3>Hotellie</h3>
						</p:commandLink>
					</div>
					<div class="col-xs-7">
					   <h:form>
						<p:commandLink action="/search/search.xhtml" styleClass="fa fa-search"></p:commandLink>
					   </h:form>	
					</div>
          		  </div>
	            
	            
	            
	       </pm:header>
            
           <pm:content>
            <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
          
                
          		<h:form id="main" style="font-size:12px">
                <p:panel  styleClass="noHeader hotelFullView">     
                    <p:outputPanel id="viewDealId" autoUpdate="true">
                            <h:panelGrid columns="2" style="width:100%">
                              <h:outputLabel value="#{dealView.dealData.deal.dealName}" />
                      	  	  <p:commandLink value="Add to watch list" style="float:right"/>
                      	    </h:panelGrid>
                      	    <div class="row">
                      	    	<div class="thumbnail right-caption col-xs-12 fullView">
                      	    		<div class="boxHeader">
                      	    			<h:outputLabel value="#{dealView.dealData.hotel.name}" styleClass="offer"/>
                      	    			<h:outputLabel value="20 days left" styleClass="daysLeft"/>
                      	    		</div>
                      	    		 <div class="row">
		                      	    	<div class="col-xs-5" style="padding:0">
	                      	    			<img class="col-xs-12" src="#{request.contextPath}/resources/image/h1.jpg" alt="..."/>
	                      	    		</div>
	                      	    		<div class="col-xs-6" style="margin-left: 1em;">
	                      	    			<p><b>#{dealView.dealData.availableForBooking}</b> Available/	
	                      	    			<p:commandLink  action="/deal/dealTransactions.xhtml?faces-redirect=true">                      	    			
	                      	    			    <b>#{dealView.dealData.alreadyBooked}</b> sold
	                      	    			</p:commandLink>
	                      	    			</p>
	                      	    			<div class="facilities row" style="margin:0">
												<i class="fa fa-car"></i>
												<i class="fa fa-wifi"></i>
												<i class="fa fa-cutlery"></i>
												<i class="fa fa-plus-square"></i>
											</div>
											<div class="star">
											<h:outputLabel value="#{searchView.getStar(dealView.dealData.hotel.starRating)}" escape="false"/>
											</div>
	                      	    		</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<h:outputLabel value="Offer Details:" />
		                      	    	<div class="col-xs-1"></div>
		                      	    	<div class="col-xs-9">
		                      	    	    <h:outputLabel value="#{dealView.liveDealCriterionsinHTML}" escape="false"/>
		                      	    	</div>
		                      	    </div>
		                      	    <div class="row">
		                      	    	<div class="col-xs-7 pull-right">
		                      	    		<h4 style="display:inline">Price:</h4>
		                      	    		<span class="del">
												<p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h3 style="display:inline">$#{dealView.dealData.originalPrice}</h3></p:outputPanel>
											</span>
											<div>
												<p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h4 style="display:inline">After #{dealView.dealData.afterDiscount}%:</h4></p:outputPanel>
												<h4 class="cost" style="display:inline">$#{dealView.dealData.currentPrice}</h4>/ROOM
											</div>
		                      	    	</div>		                      	    	
		                      	    </div>
		                      	    <div class="row">
		                      	    	<div class="col-xs-8">
		                      	    		<pm:field>
		                      	    			<p:outputLabel for="numRooms" value="No of Rooms" style="width: 50%;float: left;"/>
										        <p:selectOneMenu id="numRooms" value="#{dealView.dealData.noOfRooms}">
										             <f:selectItems value="#{dealView.availableRooms}" />  
										             <p:ajax update="main" listener="#{dealView.fireNoOfRoomChangedAction()}"></p:ajax>
										        </p:selectOneMenu>
		                      	    		</pm:field>
		                      	    	</div>
		                      	    	<div class="col-xs-4" style="style="padding-top: .7em;"">
		                      	    		<p:commandLink value="Buy" styleClass="btn btn-success" disabled="#{not searchView.dealView.buyButtonEnabled}"  action="#{searchView.buyAction()}" ajax="false" />
		                      	    	</div>
		                      	    </div>
		                      	       <div class="row">
		                      	         <div style="margin-left:15px">
		                      	            Total Cost - $ #{searchView.dealView.dealData.totalCost} for #{searchView.dealView.dealData.totalDays} nights
		                      	         </div>
		                      	       </div>
                      	    	</div>
                      	    </div>
                     </p:outputPanel> 
                  </p:panel>
                </h:form>
            </pm:content>
        </pm:page>

    </h:body>
    
</html>